<template>
  <div>
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="商户商品-详情" size="75%" class="box-drawer"
      :with-header="false" :visible.sync="drawerLoading" :show-close="true" @close="cloneDrawer">
      <!-- 头部-->
      <div v-loading="loading">
      <div style="position: relative">
        <div class="drawerTitle">
          <span>商户商品-详情</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
      </div>
      <!--  -->
      <div class="infoDiv">
        <div class="img" style="overflow: hidden">
          <el-image style="width: 100%; height: 100%" :src="goodsData.main_image"></el-image>
        </div>
        <div class="scenter">
          <div class="order_center">
            <div>
              <div class="orderdetail_item">
                <p>商品编码：</p>
                <p>
                 {{goodsData.supplier_name}}
                </p>
              </div>
              <div class="orderdetail_item">
                <p>供应商：</p>
                <p>
                 {{goodsData.supplier_name}}
                </p>
              </div>
            </div>
            <div>
              <div class="orderdetail_item">
                <p>商品名称：</p>
                <p>
                 {{goodsData.mgsl_name}}
                </p>
              </div>
              <div class="orderdetail_item">
                <p>商品类型：</p>
                <p v-if="goodsData.type == 1">
                 普通商品
                </p>
                <p v-if="goodsData.type == 2">
                 卡密商品
                </p>
                <p v-if="goodsData.type == 3">
                 虚拟商品
                </p>
              </div>
            </div>
            <div>
              <div class="orderdetail_item">
                <p>剩余库存：</p>
                <p>
                  {{goodsData.inventory_total}}
                </p>
              </div>
              <div class="orderdetail_item">
                <p>商品类目：</p>
                <p>
                  {{goodsData.category1_name}}
                  {{goodsData.category2_name}}
                  {{goodsData.category3_name}}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="right">
          <div class="order_center">
            <div class="orderdetail_item">
              <p>上架状态：</p>
              <p v-if="goodsData.status == 1" style="color:#567722;font-weight: 550;">
               已上架
              </p>
              <p v-if="goodsData.status == 2" style="color:#f78989;font-weight: 550;">
               已下架
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- tab -->
      <el-tabs v-model="activeNames" style="margin-left: 20px;" @tab-click="handleClick">
        <el-tab-pane label="商品信息" name="product_information">
          <productInformation :goodsDetail="goodsData"/>
        </el-tab-pane>
       <el-tab-pane label="采购信息" name="procurement_information">
        <merchantPay ref="merpays"/>
        </el-tab-pane>
        <el-tab-pane label="销售信息" name="sales_information">
          <merchantsPay ref="merspays"/>
        </el-tab-pane>
        <el-tab-pane label="自提信息" name="self_pickup_information">
          <merselfPickup ref="merselfpickup"/>

        </el-tab-pane>
        <el-tab-pane label="数据分析" name="data_analysis">
          <empty
            height="40vh"
            title="后期升级功能..."

          ></empty>
        </el-tab-pane>
      </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import {
    getDetail
  } from '@/api/merchant'
  import productInformation from './product_information.vue'
  import merchantPay from './merchantPay.vue'
  import merchantsPay from './merchantsPay.vue'
  import merselfPickup from './merselfPickup.vue'

  export default {
    name: 'refDetail',
    components: {
      productInformation,
      merchantPay,
      merchantsPay,
      merselfPickup
    },
    data() {
      return {
        activeNames:'product_information',
        goodsData:{},
        loading: false,
        drawerLoading: false,
      }
    },
    created() {},
    methods: {
      //接收父组件传的值
      open(row) {
        this.drawerLoading = true
        this.loading = true
        getDetail({id:row.id}).then((res) => {
          this.goodsData = res.data
          this.loading = false
        })
      },
      cloneDrawer() {
        this.drawerLoading = false
        this.activeNames = 'product_information'
        this.goodsData = {}
      },
      handleClick(val) {
        if(this.activeNames == 'procurement_information'){

          this.$refs.merpays.getlist(this.goodsData.id)
        }
        if(this.activeNames == 'sales_information'){

          this.$refs.merspays.getlist(this.goodsData.id)
        }
        if(this.activeNames == 'self_pickup_information'){

          this.$refs.merselfpickup.getlist(this.goodsData.id)
        }
      },
    }
  }
</script>
<style lang="scss">
  .infoDiv {
    width: 96%;
    margin: 10px auto;
    display: flex;
    background-color: #F5F5F5;
    border-radius: 6px;
    padding: 10px;

    .img {
      width: 65px;
      height: 65px;
      border-radius: 10%;
      background-color: #fff;
      margin-top: 5px;
    }
    .right{

    }
    .scenter {
      flex: 1;
      margin-left: 10px;

      h3 {
        line-height: 30px;
        font-weight: 400;
        font-size: 16px;
        padding: 0px 0;
        margin: 0;
      }
    }
  }
  .orderdetail_item {
    display: flex;
    // width: 165px;
    justify-content: start;
    margin-right: 30px;

    p:nth-child(2) {
      color: #000;
      font-weight: 550;
      margin-left: 15px;
    }
  }
  .order_center {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0 2px 0 0;
    font-size: 13px;
    color: #666;
  }
</style>
